<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title" backUrl="index/order"></my-navbar>
		<view class="page-order-detail">
			<scroll-view class="page-order-detail-scroller" :scrollY="true">
				<view class="order-detail-step-bar">
					<view class="status" v-if="order.order_status===-1">
						<text class="h2">订单已取消</text>
						<view class="p">
							<block>
								<text class="link"></text>
								<text>您的订单已经取消，期待您的下一次光临</text>
							</block>
						</view>
					</view>
					<view class="status" v-if="order.order_status===5">
						<text class="h2">订单已完成</text>
						<view class="p">
							<block>
								<text class="link"></text>
								<text>您的订单已经完成，期待您的下一次光临</text>
							</block>
						</view>
					</view>
					<scroll-view class="scroller" :scrollX="true" :scrollY="false" v-if="order.order_status!=-1 && order.order_status!=5">
						<view class="order-detail-tep-line">
							<block v-for="(item,index) in tep_line" :key="index">
							<view class="step-line-item" :class="item.icon">
								<view class="i"></view>
								<view class="p">
									<text class="t">{{item.name}}</text>
								</view>
							</view>
							</block>
						</view>
					</scroll-view>
				</view>
				
				<count-down :closetime="order.retainer_last_time" v-if="order.is_pay==0 && order.is_retainer==1"></count-down>
				
				<view class="order-content">					
					<orderItem :order="order" :car="car" type="info" v-if="order.id>0"></orderItem>

					<view class="order-row">
						<u-cell-group :border="false">
							<u-cell title="订单编号" :border="false">
								<view slot="value" class="row-right">
									<text class="row-value-left">{{order.order_sn}}</text>
									<text class="row-value-line"></text>
									<text class="row-value-right" @click="copy(order.order_sn)">复制</text>
								</view>
							</u-cell>
							<u-cell title="订单类型" :border="false" :value="order.is_drive==1?'代驾订单':'自驾订单'"></u-cell>
							<u-cell title="下单时间" :border="false" :value="order.createtime"></u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.driver_id!=0">
						<u-cell-group :border="false" v-if="order.driver_status==1">
							<u-cell title="司机信息" :border="false" value="已接单" :titleStyle="titleStyle"></u-cell>
							<u-cell title="姓名" :border="false" :value="driver.realname"></u-cell>
							<u-cell title="电话" :border="false">
								<view slot="value" class="row-right">
									<text class="row-value-left">{{driver.mobile}}</text>
									<text class="row-value-line"></text>
									<text class="row-value-right" @click="phonCall(driver.real_mobile)">拨打电话</text>
								</view>
							</u-cell>
							<phone-yinsi></phone-yinsi>
						</u-cell-group>
						
						<u-cell-group :border="false" v-else>
							<u-cell title="正在分配司机，请耐心等候..." :border="false" value="未接单" :titleStyle="titleStyle"></u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.id>0">
						<u-cell-group :border="false">
							<u-cell title="费用明细" :border="false" :titleStyle="titleStyle"></u-cell>
							<!-- #ifdef MP-ALIPAY -->
							<u-cell title="芝麻免押金额" :border="false" :value="(order.is_auth==1 ? '已免押' : '已解冻') + '：￥' + order.auth_fee"></u-cell>
							<!-- #endif -->
							<u-cell title="车辆租赁费用" :border="false" :value="'￥'+ order.price + '/天'"></u-cell>
							<u-cell title="基本服务费" :border="false" :value="'￥'+ order.service_fee + '/天'"></u-cell>
							<u-cell title="基础手续费" :border="false" :value="'￥'+ order.base_fee + '/次'"></u-cell>
							<u-cell title="租车押金" :border="false" :value="'￥'+ order.deposit_fee + '/次'"></u-cell>
							<block v-for="(item,index) in increment" :key="index">
								<u-cell :title="item.name" :border="false">
									<view slot="value" class="row-right" rightIcon="arrow-right">
										￥{{item.price}}{{item.is_day===1?'/天':'/次'}}
									</view>
								</u-cell>
							</block>
							<block v-if="order.is_retainer==1">
								<u-cell title="定金金额" :border="false" :value="'￥'+ order.retainer_first_fee"></u-cell>
								<u-cell title="定金付款时间" :border="false" :value="order.retainer_pay_time"></u-cell>
								<u-cell title="定金状态" :border="false" :value="pay_status[order.retainer_pay_status-1].name"></u-cell>
								<u-cell title="尾款金额" :border="false" :value="'￥'+ order.retainer_last_fee"></u-cell>
								<u-cell title="尾款截止时间" :border="false" :value="order.retainer_last_time"></u-cell>
							</block>
							<u-cell v-if="$config.plugin.coupon===1 && order.discount_fee>0" title="优惠">
								<view slot="value" class="row-right money" rightIcon="arrow-right">
									-￥{{order.discount_fee}}
								</view>
							</u-cell>
							<u-cell title="总计" :titleStyle="titleStyle" :border="false">
								<view slot="value" class="row-right money" rightIcon="arrow-right">
									￥{{order.money}}
								</view>
							</u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.pay_type==5">
						<u-cell-group :border="false">
							<u-cell title="线下汇款信息" :border="false" :titleStyle="titleStyle"></u-cell>
							<u-cell title="汇款时间" :border="false" :value="payment.create_time"></u-cell>
							<u-cell title="收款渠道" :border="false" :value="bank.branch_name"></u-cell>
							<u-cell title="收款账号" :border="false" :value="bank.bank_number"></u-cell>
							<u-cell title="收款人" :border="false" :value="bank.bank_realname"></u-cell>
							<u-cell title="转账凭证" :border="false"></u-cell>
						</u-cell-group>
						<view class="album">
							<my-album :urls="order.bank_images" keyName="images_url" rowCount="4" maxCount="20"></my-album>
						</view>
					</view>
					
					<view class="order-row" v-if="order.id>0">
						<u-cell-group :border="false">
							<u-cell title="积分情况" :border="false" :titleStyle="titleStyle"></u-cell>
							<u-cell title="获取积分" :border="false" :value="order.gift_points + '分'"></u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.gain_type==2">
						<u-cell-group :border="false">
							<u-cell title="取车门店" :border="false" :titleStyle="titleStyle"></u-cell>
							<u-cell title="门店名称" :border="false" :value="order.gain_store.name"></u-cell>
							<u-cell title="营业时间" :border="false" :value="order.gain_store.worktime"></u-cell>
							<u-cell title="营业地址" :border="false">
								<view slot="value" class="row-value-text">
									{{order.gain_store.address}}
								</view>
							</u-cell>
							<u-cell title="联系电话" :border="false">
								<view slot="value" class="row-right" rightIcon="arrow-right">
									<text class="row-value-left"></text>
									<text class="row-value-line"></text>
									<text class="row-value-right" @click="phonCall(order.gain_store.phone)">{{order.gain_store.phone}}</text>
								</view>
							</u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.back_type==2">
						<u-cell-group :border="false">
							<u-cell title="还车门店" :border="false" :titleStyle="titleStyle"></u-cell>
							<u-cell title="门店名称" :border="false" :value="order.back_store.name"></u-cell>
							<u-cell title="营业时间" :border="false" :value="order.back_store.worktime"></u-cell>
							<u-cell title="营业地址" :border="false">
								<view slot="value" class="row-value-text">
									{{order.back_store.address}}
								</view>
							</u-cell>
							<u-cell title="联系电话" :border="false">
								<view slot="value" class="row-right" rightIcon="arrow-right">
									<text class="row-value-left"></text>
									<text class="row-value-line"></text>
									<text class="row-value-right" @click="phonCall(order.back_store.phone)">{{order.back_store.phone}}</text>
								</view>
							</u-cell>
						</u-cell-group>
					</view>
					
					<view class="order-row" v-if="order.gain_images.length>0">
						<u-cell-group :border="false">
							<u-cell title="取车凭证图片" :border="false" :titleStyle="titleStyle"></u-cell>
						</u-cell-group>
						<view class="album">
							<my-album :urls="order.gain_images" keyName="images_url" rowCount="4" maxCount="20"></my-album>
						</view>
					</view>
					
					<view class="order-row" v-if="order.back_images.length>0">
						<u-cell-group :border="false">
							<u-cell title="还车凭证图片" :border="false" :titleStyle="titleStyle"></u-cell>
						</u-cell-group>
						<view class="album">
							<my-album :urls="order.back_images" keyName="images_url" rowCount="4" maxCount="20"></my-album>
						</view>
					</view>
					
				</view>
				
				<refund-item :list="refund"></refund-item>
				
			</scroll-view>
			<u-gap height="60" bgColor="#F5F5F5"></u-gap>
			<view class="order-action">
				<mars-orderStatus :order="order" :isList="false" @refresh="refresh"></mars-orderStatus>
			</view>
		</view>
	</view>
</template>

<script>
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'订单明细',
				id:0,
				order:{},
				car:{},
				bank:{},
				payment:{},
				upmap:{},
				driver:{},
				increment:[],
				tep_line:[],
				refund:[],
				ispay:0,			//判断是否支付完成跳转过来的
				titleStyle:{'font-weight':700},
				pay_status:[
					{
						status:1,
						name:'已付定金'
					},
					{
						status:2,
						name:'已付尾款'
					},
					{
						status:3,
						name:'已退定金'
					},
				]
			}
		},
		onLoad(option){
			this.id=option.id
			this.ispay=option.ispay??0
		},
		onShow(){
			this.initData()
		},
		methods: {
			initData(){
				//获取订单详情 加载提示
				uni.showLoading({
						title: '订单加载中...',
						mask: true
				});
				//获取订单详情
				this.$u.api.orderInfo({
					order_id:this.id,
					ispay:this.ispay,
				}).then(res=>{
					this.order=res.data.order
					this.car=res.data.car
					this.driver=res.data.drive
					this.upmap=res.data.upmap
					this.tep_line=res.data.tep_line
					this.increment=res.data.increment
					this.refund=res.data.refund
					this.payment=res.data.payment
					this.bank=res.data.bank
					uni.hideLoading()
				})
			},
			//拷贝资料
			copy(val){
				let self=this
				uni.setClipboardData({
				    data: val,
				    success: function () {
						//#ifdef MP-ALIPAY
						self.$c.info('内容已复制')
						//#endif
				    }
				});
			},
			phonCall(number){
				uni.makePhoneCall({
				    phoneNumber: number
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-navbar__content__title{
		color: #FFFFFF !important;
	}
	.u-navbar__content__left{
		.u-icon__icon{
			color: #FFFFFF !important;
		}
	}
	.order-content{
		margin: 20rpx;
		/* min-height: calc(100vh - 150rpx);*/
	}
	.u-cell__body{
		border-bottom:1rpx solid #F2F2F2 !important;
	}
	.order-row{
		padding: 0rpx 30rpx;
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.order-row .row-right{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		line-height: 24px;
		color: #606266;
	}
	
	.order-row .row-right .row-value-line{
		border-left: 1rpx solid #F2F2F2;
		height: 40rpx;
		margin: 0rpx 15rpx;
	}
	.order-row .row-right .row-value-right{
		color: var(--view-theme);
	}
	
	.order-row .money{
		font-weight: 700;
		color: #e45656;
	}
	
	.page-order-detail-scroller {
	    background-color: #f5f5f5;
	}
	
	.page-order-detail .order-tips {
	    margin: -20rpx 0 20rpx;
	    padding: 20rpx 30rpx;
	    color: #fff;
	    font-size: 26rpx;
	    background: #6e6f72;
	}
	
	.page-order-detail .claim-popup .title {
	    display: block;
	    height: 70rpx;
	    color: #999;
	    font-size: 26rpx;
	    line-height: 70rpx;
	    text-align: center;
	    border-bottom: 1px solid #f5f5f5;
	}
	
	.page-order-detail .claim-popup .item {
	    height: 90rpx;
	    line-height: 90rpx;
	    text-align: center;
	    border-bottom: 1px solid #f5f5f5;
	}
	
	.page-order-detail .claim-popup .close {
	    height: 100rpx;
	    margin-top: 20rpx;
	    color: #777;
	    line-height: 100rpx;
	    text-align: center;
	}
	
	.u-status-bar,.order-detail-step-bar,.u-navbar__content{
		background-color: #303239 !important;
	}
	.order-detail-step-bar {
	    padding-top: 20rpx;
	    height: 180rpx;
	    margin-bottom: 20rpx;
	    overflow: hidden;
	}
	
	.order-detail-step-bar .scroller {
	    height: 200rpx;
	    overflow-x: auto;
	}
	
	.order-detail-step-bar--has-tis {
	    background-size: 100% 360rpx;
	    height: 230rpx;
	    padding-top: 0;
	}
	
	.order-detail-step-bar .status>.h2 {
	    font-size: 34rpx;
	    display: block;
	    color: #fff;
	    padding: 0 0 5rpx 40rpx;
	}
	
	.order-detail-step-bar .status>.p {
	    font-size: 26rpx;
	    display: block;
	    color: rgba(255,255,255,.4);
	    padding: 0 40rpx 25rpx;
	}
	
	.order-detail-step-bar .status>.p .link {
	    color: #00bc93;
	}
	
	.order-detail-tep-line,.order-detail-tep-line .step-line-item {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-negative: 0;
	    flex-shrink: 0;
	}
	
	.order-detail-tep-line {
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	
	.order-detail-tep-line .step-line-item {
	    flex-direction: column;
	    -ms-flex-align: center;
	    align-items: center;
	    position: relative;
	    overflow: hidden;
	    width: 140rpx;
	    flex: 1 1 140rpx;
	}
	
	.order-detail-tep-line .step-line-item::after,.order-detail-tep-line .step-line-item::before {
	    content: '';
	    width: 50%;
	    height: 1px;
	    background: rgba(255,255,255,.2);
	    position: absolute;
	    top: 15rpx;
	}
	
	.order-detail-tep-line .step-line-item::before {
	    right: 50%;
	    transform: translate(-20rpx,0);
	}
	
	.order-detail-tep-line .step-line-item::after {
	    left: 50%;
	    transform: translate(20rpx,0);
	}
	
	.order-detail-tep-line .step-line-item .i {
	    display: block;
	    width: 30rpx;
	    height: 30rpx;
	    border-radius: 50%;
	    margin-bottom: 5rpx;
	    position: relative;
	}
	
	.order-detail-tep-line .step-line-item .i::after {
	    content: '';
	    display: block;
	    width: 14rpx;
	    height: 14rpx;
	    background: #61646a;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin: -7rpx 0 0 -7rpx;
	    border-radius: 50%;
	}
	
	.order-detail-tep-line .step-line-item .p {
	    display: block;
	    color: rgba(255,255,255,.4);
	    text-align: center;
	    font-size: 24rpx;
	}
	
	.order-detail-tep-line .step-line-item .p .t {
	    display: block;
	}
	
	.order-detail-tep-line .step-line-item:first-child::before {
	    display: none;
	}
	
	.order-detail-tep-line .step-line-item:last-child::after {
	    display: none;
	}
	
	.order-detail-tep-line .step-line-item.done .i {
	    background: #61646a url(../static/images/icon-step-check.png) center no-repeat;
	    background-size: 15rpx auto;
	}
	
	.order-detail-tep-line .step-line-item.done .i::after {
	    display: none;
	}
	
	.order-detail-tep-line .step-line-item.active .i {
	    background: rgba(0,188,147,.2);
	}
	
	.order-detail-tep-line .step-line-item.active .i::after {
	    background: #00bc93;
	}
	
	.order-detail-tep-line .step-line-item.active .p {
	    color: #fff;
	}
	
	.com-order-detail-cost-detail {
	    margin-bottom: 20rpx;
	}
	
	.order-action{
		position: fixed;
		bottom: 0rpx;
		padding: 15rpx 20rpx;
		border-top: 1rpx solid $u-border-color;
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.album{
		margin:26rpx auto;
	}
	
	.row-value-text{
		width: 400rpx;
		word-wrap: break-word;
		text-align: right;
	}
</style>
